<template>
  <van-nav-bar
    title="详情页"
    left-text="返回"
    left-arrow
    @click-left="$router.go(-1)"
  >
    <template #right>
      <van-popover
        v-model:show="showPopover"
        theme="dark"
        :actions="actions"
        placement="bottom-end"
        @select="selectPopItem"
      >
        <template #reference>
          <van-icon name="ellipsis" size="18" />
        </template>
      </van-popover>
    </template>
  </van-nav-bar>
  <van-share-sheet
    v-model:show="showShare"
    title="立即分享给好友"
    :options="options"
    @select="shareSelect"
  />
  <div class="detail-swipe-box">
    <van-swipe class="detail-swipe" :autoplay="3000" indicator-color="#1989fa">
      <van-swipe-item
        v-for="(item, index) in productSwipe"
        :key="index"
        @click="selctPicItem(index)"
      >
        <img :src="item" alt="" />
      </van-swipe-item>
    </van-swipe>
    
  </div>
  <div>
    <p>￥{{ productContent.originprice }}</p>
    <p>{{ productContent.proname }}</p>
  </div>
  <van-action-bar>
  <van-action-bar-icon icon="chat-o" text="评论" />
  <van-action-bar-icon icon="like-o" text="点赞" />
  <van-action-bar-icon icon="star-o" text="收藏" />
  <van-action-bar-button type="warning" text="加入购物车" />
  <van-action-bar-button type="danger" text="立即购买" />
</van-action-bar>
</template>

<script setup lang="ts">
import { nextTick, onMounted, ref } from "vue";
import { useRoute } from "vue-router";
import type { Ref } from "vue";
import { getProduceDetail } from "@/api/api";
import { Toast, ImagePreview } from "vant";
interface IAPIProduct {
  code: string;
  data: IProductItem;
  message: string;
}
interface IProductItem {
  originprice?: string;
  proname?: string;
  banners: string[];
}
interface IVideo {
  play: () => void;
  sum: () => number;
}

const route = useRoute();
const productId: Ref<string> = ref("");
const productSwipe: Ref<string[]> = ref([]);
const showPopover: Ref<boolean> = ref(false);
const actions = [
  { text: "首页", icon: "home-o", path: "/home" },
  { text: "购物车", icon: "cart-o", path: "/car" },
  { text: "分享", icon: "share-o" },
];
const showShare = ref(false);
const options = [
  { name: "微信", icon: "wechat" },
  { name: "微博", icon: "weibo" },
  { name: "复制链接", icon: "link" },
  { name: "分享海报", icon: "poster" },
  { name: "二维码", icon: "qrcode" },
];
const videoShow = ref(false);
const refVideo: Ref<IVideo | null> = ref(null);
const productContent: Ref<IProductItem> = ref({ banners: [] });

const APIProductDetail = async (id: string) => {
  const res = (await getProduceDetail(id)) as unknown as IAPIProduct;
  if (res.code === "200") {
    productContent.value = res.data;
    productSwipe.value = res.data.banners[0].split(",");
  }
};

const selectPopItem = (action: { text: string; index: number }) => {
  if (action.text === "分享") {
    showShare.value = true;
  }
};

const shareSelect = (option: { name: string; icon: string }) => {
  new Toast(option.name);
  // 调用和微博微信相关的JSapi
  showShare.value = false;
};

const selctPicItem = (index: number) => {
  new ImagePreview({
    images: productSwipe.value,
    startPosition: index,
  });
};

const playVideo = () => {
  videoShow.value = true;
  nextTick(() => {
    refVideo.value?.play();
  });
};

onMounted(() => {
  productId.value = route?.query?.id as string;
  APIProductDetail(productId.value);
});
</script>

<style scoped lang="scss">
.detail-swipe {
  .van-swipe__track {
    .van-swipe-item {
      width: 100%;
      img {
        display: block;
        width: 100%;
        height: 720px;
      }
    }
  }
}
.detail-swipe-box {
  position: relative;
  .btn-postion {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translate(-50%, 0);
    border-radius: 20px;
    :deep(.van-button__content) {
      display: block;
      height: 30px;
      line-height: 30px;
    }
  }
}
</style>
